<template>
  <div class="content">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>滑块</span>
          <el-button type="primary" @click="addBtn">提交</el-button>
        </div>
      </template>
      <div>
        <div class="slider-demo-block">
          <span class="text">滑块：</span>
          <el-slider
            :max="1"
            v-model="sliderList.vaule"
            :step="0.01"
            range
            :marks="marks"
          >
          </el-slider>
        </div>
        <div class="slider-demo-block">
          <span class="text">滑块：</span>
          <el-slider
            :max="1"
            v-model="sliderList.value2"
            :step="0.01"
            :marks="marks"
          >
          </el-slider>
        </div>
      </div>
    </el-card>

    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>element数字输入</span>
          <el-button type="primary" @click="addBtn1">提交</el-button>
        </div>
      </template>
      <div>
        <div class="slider-demo-block">
          <span class="text">数字：</span>
          <el-input-number
            v-model="form.num"
            :step="10"
            :min="1"
            controls-position="right"
            placeholder="输入数字"
            @change="handleChange1"
          />
        </div>

        <div class="slider-demo-block">
          <span class="text">数字：</span>
          <el-input
            style="width: 200px"
            type="number"
            :step="10"
            :min="1"
            v-model="form.num2"
            placeholder="输入数字"
          >
            <template #suffix>
              <span>km</span>
            </template>
          </el-input>
        </div>
      </div>
    </el-card>

    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>vxe数字输入</span>
          <el-button type="primary" @click="addBtn2">提交</el-button>
        </div>
      </template>
      <div>
        <div class="slider-demo-block">
          <span class="text">数字：</span>
          <vxe-input
            style="width: 250px"
            v-model="form.num3"
            placeholder="数值类型"
            type="number"
            :step="10"
            :max="100"
            :min="1"
          >
            <template #suffix>
              <span class="all">公里/小时</span>
            </template>
          </vxe-input>
        </div>

        <div class="slider-demo-block">
          <span class="text">数字：</span>
          <vxe-input
            style="width: 250px"
            v-model="form.num4"
            placeholder="数值类型"
            type="number"
            :step="10"
            :max="100"
            :min="1"
          >
            <template #suffix>
              <span class="all">km</span>
            </template>
          </vxe-input>
        </div>
      </div>
    </el-card>

    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>取色器</span>
          <el-button type="primary" @click="addBtn4">提交</el-button>
        </div>
      </template>
      <div>
        <div class="slider-demo-block">
          <span class="text">颜色：</span>
          <el-color-picker
            v-model="colorList.color"
            show-alpha
            :predefine="predefineColors"
          />
        </div>
      </div>
    </el-card>

    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>评分</span>
          <el-button type="primary" @click="addBtn5">提交</el-button>
        </div>
      </template>
      <div>
        <div class="slider-demo-block">
          <span class="text">基本：</span>
          <el-rate v-model="rateList.value1"></el-rate>
        </div>
        <div class="slider-demo-block">
          <span class="text">三状态：</span>
          <el-rate v-model="rateList.value2" :colors="colors"></el-rate>
        </div>
        <div class="slider-demo-block">
          <span class="text">半星：</span>
          <el-rate v-model="rateList.value3" allow-half />
        </div>
        <div class="slider-demo-block">
          <span class="text">只读：</span>
          <el-rate
            v-model="value4"
            disabled
            show-score
            text-color="#ff9900"
            score-template="{value} 分"
          >
          </el-rate>
        </div>
      </div>
    </el-card>

    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>穿梭框</span>
          <el-button type="primary" @click="addBtn6">提交</el-button>
        </div>
      </template>
      <div>
        <el-transfer
          v-model="leftValue"
          style="text-align: left; display: inline-block"
          filterable
          :left-default-checked="[2, 3]"
          :right-default-checked="[1]"
          :render-content="renderFunc"
          :titles="['喜欢你', '爱你呦']"
          :button-texts="['升级', '降级']"
          :format="{
            noChecked: '${total}',
            hasChecked: '${checked}/${total}',
          }"
          :data="data"
          @change="handleChange"
        >
          <template #left-footer>
            <el-button class="transfer-footer" size="small"
              >点我</el-button
            >
          </template>
          <template #right-footer>
            <el-button class="transfer-footer" size="small"
              >不要</el-button
            >
          </template>
        </el-transfer>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      sliderList: {
        vaule: [0.2, 0.6],
        value2: 0.3,
      },
      marks: {
        0: "差",
        0.25: "中",
        0.5: "良",
        0.75: "好",
        1: "优",
      },
      form: {
        num: 10,
        num2: 20,
        num3: 20,
        num4: 1,
      },
      predefineColors: [
        "#ff4500",
        "#ff8c00",
        "#ffd700",
        "#90ee90",
        "#00ced1",
        "#1e90ff",
        "#c71585",
        "rgba(255, 69, 0, 0.68)",
        "rgb(255, 120, 0)",
        "hsv(51, 100, 98)",
        "hsva(120, 40, 94, 0.5)",
        "hsl(181, 100%, 37%)",
        "hsla(209, 100%, 56%, 0.73)",
        "#c7158577",
        "#ffffff",
        "red",
      ],
      colorList: {
        color: "red",
      },
      rateList: {
        value1: null,
        value2: null,
        value3: null,
      },
      value4: "3.9",
      colors: ["#99A9BF", "#F7BA2A", "#FF9900"],
      data:[
        {key:1,label:'选项一',},
        {key:2,label:'选项2',},
        {key:3,label:'选项3',},
        {key:4,label:'选项4',},
        {key:5,label:'选项5',},
        {key:6,label:'选项6',},
        {key:7,label:'选项7',},
        {key:8,label:'选项8',},
        {key:9,label:'选项9',},
      ],
      leftValue:[1],
    };
  },
  methods: {
    addBtn() {
      console.log(this.sliderList);
    },
      handleChange1(value, direction, movedKeys) {
      console.log(value, direction, movedKeys)
      alert('来了')
    },
    addBtn1() {
      console.log(this.form.num, this.form.num2);
    },
    addBtn2() {
      console.log(this.form.num3, this.form.num4);
    },
    addBtn4() {
      console.log(this.colorList.color);
    },
    addBtn5() {
      console.log(this.rateList);
    },
    addBtn6(){
      console.log(this.leftValue);
    },
     handleChange(value, direction, movedKeys) {
      console.log(value, direction, movedKeys)
      alert('来了')
    },
  },
};
</script>

<style lang="less" scoped>
:deep(.vxe-input) {
  display: flex;
  .vxe-input--suffix {
    width: 80px;
  }
}
.content {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  height: calc(100vh - 160px);
  overflow: scroll;
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.box-card {
  width: 48.5%;
  margin-right: 20px;
  margin-bottom: 20px;
}
.slider-demo-block {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  .text {
    width: 60px;
  }
}
.el-slider {
  width: 100%;
}
</style>